<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%= htmlWebpackPlugin.options.title%>
    </title>
    <script>
        // 计算html font-size
        // 保证7.5rem等于屏幕宽度
        (function (f, j) {
            var i = document,
                d = window;
            var b = i.documentElement;
            var c;

            function g() {
                var k = b.getBoundingClientRect().width;
                if (!j) {
                    j = 1080
                }
                if (k > j) {
                    k = j
                }
                var l = k * 100 / f;
                b.style.fontSize = (l > 100 ? 100 : l) + "px";
            }
            g();
            d.addEventListener('resize', g)
            d.addEventListener("pageshow", function (k) {
                if (k.persisted) {
                    clearTimeout(c);
                    c = setTimeout(g, 300)
                }
            }, false)
        })(750, 1080);
    </script>
</head>

<body> 
    <div class="step-proccess">
        <span class="step">1</span>
        <span class="step">2</span>
        <span class="step">3</span>
    </div>
    <div class="first-step-content">
        <h2 class="step-title">第1步：确认车辆停放到指定位置</h2>
        <p>通过车辆后视镜及车前方观察，
            <br/>车头到达绿色区域，车身在黄线内。</p>
        <div class="step-info"></div>
    </div>
    <div class="second-step-content">
        <h2 class="step-title">第2步：确认完成以下操作</h2>
        <ul>
            <li>挂P档</li>
            <li>拉手刹</li>
            <li>收后视镜</li>
            <li>关车窗</li>
            <li>关雨刮</li>
            <li>收天线</li>
            <li>关天窗</li>
        </ul>
    </div>
    <div class="third-step-content">
        <h2 class="step-title">第3步：付费并启动洗车</h2>
        <p class="price">￥<span id="washPrice">10.00</span></p>
        <p>洗车费用</p>
        <ul id="chooices">
            <li id="balancePay" class="balance-pay" type="balance">
                会员余额支付
                <span>账户余额：
                    <span id="balance">100.00元</span>
                </span>
            </li>
            <li class="wechat-pay" type="weixin">
                微信支付
            </li>
        </ul>
    </div>
    <div class="fourth-step-content">
        <p>洗车用时</p>
        <p id="tiemConsumed" class="time-consuming">00:00</p>
        <p>洗车正在进行中，请耐心等待…</p>
        <div class="imgae_block"></div>

        <div class="tips-area">
            <span class='tips-title'>温馨提示：</span>
            <p>若洗车过程中发生任何意外，请拨打客服电话：
                <a href="tel:025-85411915">025-85411915</a>
            </p>
        </div>
        <div class="tips-model">
            <p class="title">温馨提示</p>
            <p class="contant">洗车已结束，欢迎下次光临！</p>
            <a class="back-home" href="index.html">返回主页</a>
        </div>
    </div>
    <div id="nextStepBtn" class="next-step-btn"></div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</body>

</html>